{% extends 'charge/_charge.html' %}
{% import 'public.html' as public %}


{% block main_contain %}
<div id="GateView">
    <div class="row">
        <div v-for="(val, key) in ParkingAera" class="col-2">
            <div class="info-box">
            <span :class="['info-box-icon', ParkingAera[key].bg]"><i :class="['fas', ParkingAera[key].icon]" style="font-size: 48px;"></i></span>
            <div class="info-box-content text-center">
                <span class="info-box-text" style="font-size: larger;">{[ label_name(key) ]}：{[ ParkingAera[key].supply ]}</span>
                <span class="info-box-number" style="font-size: larger;">剩餘車位：{[ ParkingAera[key].valid ]}</span>
            </div>
            <!-- /.info-box-content -->
            </div>
            <!-- /.info-box -->
        </div>
        <!-- /.col -->
    </div>
    <div class="row">
        <div class="col-lg-6">
            <div class="card">
                <div class="card-header">
                    <div v-if="Entrance.GateName==''" class="text-center">
                        <h5><strong>停車場入口準備</strong></h5>
                    </div>
                    <div v-else class="row justify-content-between">
                        <h5>閘機名稱：<strong class="text-primary">{[ Entrance.GateName ]}</strong></h5>
                        <h5>入場車牌：<strong class="text-danger">{[ Entrance.LicensePlate ]}</strong></h5>
                        <h5>識別時間：{[ Entrance.GateTime ]}</h5>
                    </div>
                </div>
                <div class="card-body">
                    <div class="form-group row justify-content-center">
                        <img class="img-thumbnail" style="width: 75%;"
                        :src="Entrance.Image=='' ? '{{ url_for('static', filename='images/default/vehicle.jpg')}}': Entrance.Image">
                    </div>
                    <div v-for="(val, key) in Entrance" v-if="GateLaneTitle.includes(key)" class="form-group row justify-content-center">
                        <label class="col-sm-2 col-form-label text-center">{[ label_name(key) ]}：</label>
                        <div class="col-sm-6">
                            <input v-model="Entrance[key]" type="text" class="form-control text-center" readonly style="font-size: 30px;">
                        </div>
                    </div>
                </div>
                <div class="card-footer text-center">
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#UpBarModal" @click="upbar_modal('Entrance')">
                        <i class="fas fa-arrow-up"></i> 起杆</button>
                    <button type="button" class="btn btn-warning" data-toggle="modal" data-target="#DownBarModal" @click="downbar_modal('Entrance')">
                        <i class="fas fa-arrow-down"></i> 落杆
                    </button>
                </div>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="card">
                <div class="card-header">
                    <div v-if="Exit.GateName==''" class="text-center">
                        <h5><strong>停車場出口準備</strong></h5>
                    </div>
                    <div v-else class="row justify-content-between">
                        <h5>閘機名稱：<strong class="text-primary">{[ Exit.GateName ]}</strong></h5>
                        <h5>離場車牌：<strong class="text-danger">{[ Exit.LicensePlate ]}</strong></h5>
                        <h5>識別時間：{[ Exit.GateTime ]}</h5>
                    </div>
                </div>
                <div class="card-body">
                    <div class="form-group row justify-content-center">
                        <img class="img-thumbnail" style="width: 75%;"
                        :src="Exit.Image=='' ? '{{ url_for('static', filename='images/default/vehicle.jpg')}}': Exit.Image">
                    </div>
                    <div v-for="(val, key) in Exit" v-if="GateLaneTitle.includes(key)" class="form-group row justify-content-center">
                        <label class="col-sm-2 col-form-label text-center">{[ label_name(key) ]}：</label>
                        <div class="col-sm-6">
                            <input v-model="Exit[key]" type="text" class="form-control text-center" readonly style="font-size: 30px;">
                        </div>
                    </div>
                </div>
                <div class="card-footer text-center">
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#UpBarModal" @click="upbar_modal('Exit')">
                        <i class="fas fa-arrow-up"></i> 起杆</button>
                    <button type="button" class="btn btn-warning" data-toggle="modal" data-target="#DownBarModal" @click="downbar_modal('Exit')">
                        <i class="fas fa-arrow-down"></i> 落杆
                    </button>
                </div>
            </div>
        </div>
    </div>
    <!--Modals-->
    <!--起杆-->
    <div class="modal fade" id="UpBarModal">
        <div class="modal-dialog modal-sm modal-dialog-centered">
            <div class="modal-content">
            <div class="modal-header justify-content-center">
                <h4 class="modal-title">{[ GateBar.ModalTitle ]}</h4>
            </div>
            <div class="modal-body text-center">
                <form>
                    <div class="form-group row justify-content-center">
                        <label class="col-form-label text-center">閘機名稱：</label>
                        <div class="col-sm-6">
                            <select v-model="GateBar.GateName" class="form-control">
                                <option v-for="i in GateBar.Gates" :value="i">{[ i ]}</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group row justify-content-center">
                        <label class="col-form-label text-center">起杆類型：</label>
                        <div class="col-sm-6">
                            <select v-model="GateBar.UpType" class="form-control">
                                <option v-for="s in UpBars" :value="s.value">{[ s.title ]}</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group row justify-content-center">
                        <label class="col-form-label text-center">車牌號碼：</label>
                        <div class="col-sm-6">
                            <input v-model="GateBar.LicensePlate" type="text" class="form-control text-center" 
                            :readonly="GateBar.UpType!='LicensePlate' ? 'readonly': false">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer justify-content-between">
                <button type="button" class="btn btn-primary">發送</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
            </div>
            <!-- /.modal-content -->
        </div>
    <!-- /.modal-dialog -->
    </div>
    <!--落杆-->
    <div class="modal fade" id="DownBarModal">
        <div class="modal-dialog modal-sm modal-dialog-centered">
            <div class="modal-content">
            <div class="modal-header justify-content-center">
                <h4 class="modal-title">{[ GateBar.ModalTitle ]}</h4>
            </div>
            <div class="modal-body text-center">
                <form>
                    <div class="form-group row justify-content-center">
                        <label class="col-form-label text-center">閘機名稱：</label>
                        <div class="col-sm-6">
                            <select v-model="GateBar.GateName" class="form-control">
                                <option v-for="i in GateBar.Gates" :value="i">{[ i ]}</option>
                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer justify-content-between">
                <button type="button" class="btn btn-primary">發送</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
            </div>
            <!-- /.modal-content -->
        </div>
    <!-- /.modal-dialog -->
    </div>
</div>
{% endblock %}


{% block scripts %}
{{ super() }}
<script>
    // 闸机预览
    var GateView = new Vue({
        el: '#GateView',
        delimiters: ['{[', ']}'],
        data: {
            UpBars: [{title: '車牌起杆', value: 'LicensePlate'}, {title: '人工起杆', value: 'Manual'}],
            Gates: [{GateType: 'Entrance', GateName: 'GateIn0'}, {GateType: 'Exit', GateName: 'GateOut0'}],
            GateLaneTitle: ['GateMessage', 'VehicleType', 'TicketNumber', 'CardNumber', 'Temp'],
            GateBar: {
                ModalTitle: '',
                GateType: '',
                GateName: '',
                GateBar: '',
                LicensePlate: '',
                UpType: 'LicensePlate',
                DownBar: false,
                Gates: []
            },
            ParkingAera:{
                Total:{supply: 100,valid: 83, icon: 'fas fa-city', bg: 'bg-primary'},
                VehicleHourly:{supply: 20,valid: 16, icon: 'fas fa-car', bg: 'bg-info'},
                VehicleMonthly:{supply: 20,valid: 17, icon: 'fas fa-car', bg: 'bg-success'},
                MotorcycleHourly:{supply: 20,valid: 17, icon: 'fas fa-motorcycle', bg: 'bg-info'},
                MotorcycleMonthly:{supply: 20,valid: 15, icon: 'fas fa-motorcycle', bg: 'bg-success'},
                Private:{supply: 20,valid: 18, icon: 'fas fa-times-circle', bg: 'bg-danger'},
            },
            Entrance: {
                GateName: '',
                GateTime: '',
                LicensePlate: '',
                Image: '',
                GateMessage: '',
                VehicleType: '',
                TicketNumber: '',
                CardNumber: '',
                Temp: '',
            },
            Exit: {
                LicensePlate: '',
                Image: '',
                GateName: '',
                GateTime: '',
                GateMessage: '',
                VehicleType: '',
                TicketNumber: '',
                CardNumber: '',
                Temp: '',
            }
        },
        methods: {
            // 标题
            label_name(key){
                switch(key){
                    case 'GateType': return '閘機類型'
                    case 'GateName': return '閘機名稱'
                    case 'LicensePlate': return '車牌號碼'
                    case 'UpType': return '起杆類型'
                    case 'GateMessage': return '閘機消息'
                    case 'VehicleType': return '地感車型'
                    case 'TicketNumber': return '時租票號'
                    case 'CardNumber': return '月租票號'
                    case 'Temp': return '溫度檢測'
                    case 'Total': return '車位總數'
                    case 'Private': return '專用車位'
                    case 'VehicleHourly': return '私家車時租'
                    case 'VehicleMonthly': return '私家車月租'
                    case 'MotorcycleHourly': return '電單車時租'
                    case 'MotorcycleMonthly': return '電單車月租'
                }
            },
            upbar_modal(key){
                if(key=='Entrance'){this.GateBar.ModalTitle='入口閘機起杆'}
                else{this.GateBar.ModalTitle='出口閘機起杆'}
                this.GateBar.Gates = []
                for(i in this.Gates){
                    let gate = this.Gates[i]
                    if(gate.GateType==key){
                        this.GateBar.GateType = gate.GateType
                        this.GateBar.GateName = gate.GateName
                        this.GateBar.Gates.push(gate.GateName)
                    }
                }
            },
            downbar_modal(key){
                if(key=='Entrance'){this.GateBar.ModalTitle='入口閘機落杆'}
                else{this.GateBar.ModalTitle='出口閘機落杆'}
                this.GateBar.Gates = []
                this.GateBar.DownBar = true
                for(i in this.Gates){
                    let gate = this.Gates[i]
                    if(gate.GateType==key){
                        this.GateBar.GateType = gate.GateType
                        this.GateBar.GateName = gate.GateName
                        this.GateBar.Gates.push(gate.GateName)
                    }
                }
            }
        },
    });
</script>
{% endblock %}


